<template>
  <div class="content" v-for="(record, index) of bonus">
    <h3>
      <b>{{ record.dividend_year }}</b>
      <b>{{ record.plan_explain }}</b>
    </h3>
    <label>
      股权登记日<span>{{ friendlyDate(record.equity_date) }}</span>
    </label>
    <label>
      除权除息日<span>{{ friendlyDate(record.ashare_ex_dividend_date) }}</span>
    </label>
    <label>
      派息日 <span>{{ friendlyDate(record.dividend_date) }}</span>
    </label>
  </div>
</template>
<script setup>
  import { useRoute } from 'vue-router';
  import { ref, watchEffect, inject } from 'vue';
  import { friendlyDate } from '@/libs/helpers.js';

  const $route = useRoute();
  const $http = inject('$http');

  const bonus = ref([]);
  const currentShare = ref('');

  async function loadBonus() {
    if (!currentShare.value) {
      return;
    }

    let rs = await $http.get(`/api/shares/${currentShare.value}/bonus`);

    bonus.value = rs.data.items;
  }

  watchEffect(() => {
    currentShare.value = $route.params.code;

    loadBonus();
  });
</script>
<style lang="less" scoped>
  .content {
    user-select: none;
    background: #fff;
    padding: 10px 10px 5px 10px;
    border-radius: 5px;
    margin: 0;

    &:not(:first-of-type) {
      margin-top: 5px;
    }

    .up {
      color: #c1232b;
    }

    .down {
      color: green;
    }

    > h3 {
      padding: 0;
      margin: 0;
      padding-bottom: 3px;
      margin-top: -5px;
      margin-bottom: 5px;
      border-bottom: solid 1px #ccc;

      > strong {
        user-select: all;
        cursor: default;
        padding-right: 10px;
      }

      > b {
        font-size: 0.918em;
        padding-left: 15px;

        &:first-of-type {
          font-size: 1.2em;
          padding-left: 0;
        }
      }
    }

    > label {
      width: 50%;
      line-height: 1.4;
      display: inline-block;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;

      > span {
        font-weight: normal;
        padding-left: 5px;
      }
    }
  }
</style>
